<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>客户详情</text>
			</view>
		</view>
		<view class="tui-top" :style="{paddingTop:(49 + top)+'px'}">
			<view class="statistics" :style="{backgroundImage: 'url('+website+'static/home/img/topbg2.png)'}">
				<view class="total" v-if="member.id">
					<view class="avatar">
						<image :src="member.avatar" mode="widthFix"></image>
					</view>
					<view class="username">
						<view class="name" style="letter-spacing: 2px;">
						{{member.username}}
						<image v-if="member.sex ==1" src="/static/images/icon/1.png" mode="widthFix"></image>
						<image v-if="member.sex ==0" src="/static/images/icon/0.png" mode="widthFix"></image>
						</view>
						<view class="other">
							<view class="tel"> {{member.mobile}}</view>
							<view class="leader" v-if="member.leader"> 专属顾问：{{member.leader.nickname}}</view>
						</view>
					</view>
					<view>
						<!-- <view class="tag"> 潜在客户</view> -->
					</view>
				</view>
				<view class="last_time">上次消费时间：{{member.last_time}}</view>
				<view class="nums" @click="openPage('log?mid='+member.id)">
					<view>
						<view class="">消费金额：￥<text>{{member.payout}}</text></view>
						<!-- <view class="">消费次数：<text>0</text>次</view> -->
					</view>
					<view>
						<!-- <view class="">服务金额：￥<text>0.00</text></view> -->
						<view class="">消费次数：<text>{{member.order_num}}</text>次</view>
					</view>
				</view>
			</view>
			<!-- 资产权益 -->
			<view class="mycard" >
				<view class="mycard-title">资产权益</view>
				<view class="mycard-body">
					<view class="zc">
						<view>
							<view class="key-name">余额</view>
							<view class="key-val"><text class="sub_money_icon">￥</text>{{ member.money + member.money2}}</view>
							<view class="key-val-sub">本金：￥{{member.money}}</view>
							<view class="key-val-sub">赠额：￥{{member.money2}}</view>
						</view>
						<!-- <view>
							<view class="key-name">优惠券</view>
							<view class="key-val">0<text class="sub_money_icon">个</text></view>
						</view> -->
						<view>
							<view class="key-name">剩余次数</view>
							<view class="key-val" @click="showMemNumberCards">{{member.nums}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 客户标签 -->
			<view class="mycard">
				<view class="mycard-title" @click="showTagsSelectStatus=true">客户标签 <tui-icon name="label" color="#f42632" :size="20" margin="0 0 0 10px"></tui-icon></view>
				<view class="mycard-body">
					<view class="user-tags">
						<text v-if="member.tags[0]" :class="'tag'+(idx%4)" v-for="(tag,idx) in member.tags">{{tag}}</text>
					</view>
				</view>
			</view>
			<!-- 客户动态 -->
			<view class="mycard" style="padding-bottom: 30upx;margin-bottom: 80upx;">
				<view class="mycard-title"  style="margin-bottom: 0;" @click="openPage('timesline?mid='+member.id)">客户动态
					<!-- <tui-icon name="edit" color="#ff9f19" :size="20" margin="0 0 0 10px" style="vertical-align: text-bottom;"></tui-icon> -->
					<!-- <text style="font-size: 26upx;color: #ff9f19;font-weight: 400;">跟进</text> -->
				 </view>
				<view class="mycard-body">
					<view class="timesline">
						<!-- <view class="date">{{week[action.week]}}<text>{{action.day}}</text></view> -->
						<view class="item" v-for="(item,idx) in action">
							<view class="line">
								<image :src="website + 'static/images/icon/'+item.type+'.png'" mode="widthFix"></image>
								<image class="downline" src="../../static/images/icon/downline.png" mode="widthFix"></image>
							</view>
							<view class="content" @click="openOrder(item)">
								<view class="title">{{item.title}}</view>
								<view class="time">{{item.create_time}}</view>
								<view class="info">{{item.content}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footerbar">
			<view @click="openPage('../order/order?mid='+mid)">
				<image src="/static/images/icon/money3.png" mode="widthFix"></image>
				<view>开单</view>
			</view>
			<view @click="openPage('../card/order?mid='+mid)">
				<image src="/static/images/icon/card_hov.png" mode="widthFix"></image>
				<view>开卡</view>
			</view>
			<view @click="openPage('../customer/mycard?mid='+mid)">
				<image src="/static/images/icon/money3.png" mode="widthFix"></image>
				<view>消耗</view>
			</view>
			<view @click="openPage('../customer/adduser')">
				<image src="/static/images/icon/adduser.png" mode="widthFix"></image>
				<view>新增会员</view>
			</view>
		</view>
		<!-- 弹窗组件 -->
		
		<tui-bottom-popup class="overflow-y" :show="showTagsSelectStatus" :height="800" :zIndex="9997" :radius="true" @close="showTagsSelectStatus=false">
			<view style="padding: 10px;padding-bottom: 0;">
				<view class="searchbox">
					<input type="text" value="" @input="searchTag" placeholder="输入关键字"/>
				</view>
			</view>
			<scroll-view class="tags-box" scroll-y="true">
				<view class="tags-item" v-for="(item, index) in tagsList"
					:key="index" :data-index="index" v-if="tagsList.length>0">
					<tui-divider dividerColor="red" gradual>{{item.name }}</tui-divider>
					<view class="lists">
						<view class="tag-one" :class="{active:findOne(tag) }" v-for="(tag ,ind) in item.tags" :key="ind" @tap.stop="chooseTag(tag)">
							{{tag}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="position: fixed;width: 100%;bottom:1px;left: 0;">
				<view class="tag-btn" @click="saveTags">
					保存
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				website:this.tui.imghost,
				mid:0,
				member:{},
				type:1,
				nodata:true,
				msgList:[],
				last_page:3,
				page:1,
				action:[],
				week:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
				showTagsSelectStatus:false,//标签
				tagsList:[],//标签列表
				oldTagsList:[],//标签列表
			};
		},
		onLoad(opt) {
			if(opt.mid){
				this.mid = opt.mid
			}
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow(){
			if(!this.mid){
				this.back();
				return ;
			}
			this.tui.chkAuth();
			this.getMemberInfo();
			// this.getTagsList();
			
		},
		methods: {
			openPage(v){
				uni.navigateTo({
					url:v
				})
			},
			openOrder(item){
				if(!item.orderid){
					return;
				}
				if(item.type ==8){
					return;
				}
				uni.navigateTo({
					url:'../myOrder/detail?oid='+item.id
				})
			},
			showMemNumberCards(){
				uni.navigateTo({
					url:'../customer/mycard?type=2&mid='+this.mid
				})
			},
			getMemberInfo(){
				this.tui.get('user/api/getMem',{id:this.mid}).then(res=>{
					this.member = res.data;
					this.member.money = parseFloat(this.member.money)
					this.getAction();
					this.getTagsList();
				});
			},getAction(){
				if(this.last_page < this.page){
					return false;
				}
				this.tui.get('user/api/memaction',{mid:this.mid,page:this.page}).then(res=>{
					this.action =[...this.action, ...res.data.data];
					this.last_page = res.data.last_page;
					this.page++;
					
				});
			},
			back(){
				uni.navigateBack()
			},
			getTagsList(){
				this.tui.get('user/setting/getTagsList').then(res=>{
					this.tagsList = res.data;
					this.oldTagsList = this.tagsList;
				});
			},
			chooseTag(tag){
				let index = this.member.tags.indexOf(tag)
				if(index>-1){
					this.member.tags.splice(index,1)
				}else{
					this.member.tags.push(tag);
				}
			},
			saveTags(){
				this.tui.post('user/api/savetags',{mid:this.member.id,tags:this.member.tags}).then(res=>{
					this.getMemberInfo();
				});
				this.showTagsSelectStatus =false;
			},findOne(tag){
				if(this.member && this.member.tags.length >0){
					return this.member.tags.indexOf(tag)>-1
				}else{
					return false;
				}
				
			},searchTag(e){
				let w = e.detail.value;
				if(w){
					let arr= this.oldTagsList;
					let new_arr = [{name:'结果',tags:[]}]
					for(let i=0;i<arr.length;i++){
						for (let x = 0; x < arr[i].tags.length; x++) {
							let word = arr[i].tags[x];
							if(word.indexOf(w)>-1){
								new_arr[0].tags.push(word);
							}
						}
					}
					this.tagsList = new_arr;
				}else{
					this.tagsList = this.oldTagsList;
				}
				
			}
		},
		onReachBottom() {
			this.getAction();  
		},  
	};
</script>

<style lang="scss">
	.container {
		padding:20rpx 0 48rpx;
		.tui-top{padding: 20upx 20upx;margin-top: 20rpx;}
		.statistics{background-size: 100% 100%;color: #FFFFFF;padding: 30upx;}
		.statistics .total{display: flex;justify-content: left;align-items: center;}
		.statistics .total .avatar{width: 120upx;height:120upx}
		.statistics .total .avatar image{width: 100upx;border-radius: 100upx;}
		.statistics .total .username {width: 100upx;border-radius: 100upx;font-size: 28upx;width: 80%;}
		.statistics .total .username .name{font-size: 32upx;font-weight: 700;}
		.statistics .total .username image{width: 24upx;margin-left: 10upx;}
		.statistics .total .username .other{font-size: 24upx;display: flex;padding-top:10upx ;}
		.statistics .total .username .other .leader{padding-left: 30upx;}
		.statistics .last_time{padding-top: 24upx;font-size: 24upx;}
		.statistics .total .sub-money{font-size: 24upx;}
		.statistics .nums{display: flex;text-align: left;}
		.statistics .nums>view{width: 100%;position: relative;font-size: 24upx;}
		.statistics .nums>view>view{padding-top: 20upx;}
		.zc{display: flex;}
		.zc > view{width: 100%;text-align: center;}
		.zc > view .key-name{color: #999999;font-size: 28upx;padding-bottom: 26upx;}
		.zc > view .key-val{color: #333;font-size: 34upx;padding-bottom: 20upx;font-weight: 700;}
		.zc > view .key-val .sub_money_icon{font-size: 20upx;}
		.user-tags{padding: 0 30upx;}
		.user-tags>text{padding: 8upx 16upx;color: #FFFFFF;background-color: #007AFF;border-radius: 10upx;
			display: inline-block;font-size: 24upx;margin-left: 10upx;margin-bottom: 10upx;}
		.user-tags>text.tag1{background-color: #FF2B3F;}
		.user-tags>text.tag2{background-color: #00aa7f;}
		.user-tags>text.tag3{background-color: #aaaaff;}
		.timesline{padding :10upx 40upx}
		.timesline .date{font-size: 28upx;color: #999999;padding-bottom: 20upx;}
		.timesline .date text{padding-left: 90upx;}
		.timesline .item{display: flex;}
		.timesline .item image{width: 46upx;height: 46upx;}
		.timesline .item .time{color: #999;font-size: 22upx;padding: 6upx 5upx;}
		.timesline .item .content{color: #999;font-size: 28upx;padding: 6upx 20upx;display: block;padding-left: 20upx;}
		.timesline .item .content .title{font-weight: 600;font-size: 28upx;}
		.timesline .item .content .info{font-weight: 400;font-size: 24upx;padding-top: 20upx;}
		.timesline .line{width: 50upx;text-align: center;}
		.timesline .line .downline{width: 12px;}
		.footerbar {display: flex;justify-content: space-around;position: fixed;bottom:0;background-color: #FFFFFF;width: 100%;height: 120upx;padding: 20upx;box-sizing: border-box;}
		.footerbar>view{text-align: center;font-size: 12px;color: #777;padding: 0 20upx;}
		.footerbar image{width: 50upx;}
		.tags-box{padding: 30upx;padding-top: 0; overflow-y: auto;height:100%;width: 100%;box-sizing: border-box;padding-bottom: 90px;}
		.tags-box .title{color:#fe1a4b;line-height: 35px;}
		.tags-box .lists .tag-one{color:#333;background-color: #EEEEEE;display: inline-block;padding: 10upx 16upx;margin-right: 20upx;margin-bottom: 20upx;font-size: 24upx;border-radius: 5px;}
		.tags-box .lists .tag-one.active{color:#fff;background-color: #fe1a4b;}
		.tag-btn{
			text-align: center;
			background-color: #fe1a4b;
			color: #FFFFFF;
			padding: 20upx;
		}
		.searchbox{
			border: 1px solid #fe1a4b;
		    padding: 5px 15px;
		}
		.searchbox input{
			font-size: 12px;
		}
		.key-val-sub{
			font-size: 10px;
			color: #ff0000;
		}
	}
</style>
